<template>
    <div class="box">
      <JsContentTitle
        :pageTitle="state.pageTitle"
        :buttonData="state.buttonData"
      ></JsContentTitle>
      <div class="contentView">
        <JsTable
          :toolBar="toolBar"
          :total="state.totalCount"
          :dataSource="state.dataSource"
          :columns="state.columns"
          :refresh="state.refresh"
          @search="searchEvent"
        >
        <template #search-last>
          <el-button @click="resetEvent" type="primary" size="small">重置</el-button>
        </template>
        </JsTable>
      </div>
    </div>
  </template>
  <script setup lang="ts">
  import { onMounted, ref, reactive } from 'vue'
  import { getRecords, getUsers } from '@/api/xinrn'
  
  onMounted(async() => {
    try {
        const res = await getUsers();
        res.data.forEach((item: any) => {
            const user = { label: item, value: item };
            toolBar.input[0].options.push(user);
        });
        state.value.refresh = 1;
    } catch (error) {
        console.error('Failed to load users:', error);
    }
  })

// 重置
  const resetEvent = () => {
    toolBar.form.username = '' // 直接重置form中的username
    state.value.refresh = 1
  }
  
//搜索
  const searchEvent = (params: any) => {
      //params包含page、pagesize、state.value.toolBar.form内容
      console.log("Search event triggered", params)
      getRecords(params).then((res: any) => {
        state.value.dataSource = res.data.data
        state.value.totalCount = res.data.total
        state.value.refresh = 0
    })
  }
  
//定义state
  const state = ref({
    buttonData: [],
    refresh: 0,
    totalCount: 0,
    pageTitle: '借阅日志',
    columns: {
      props: [
        {
          name: '书名',
          key: 'book_name',
        },
        {
          name: '借阅人',
          key: 'user_name',
        },
        {
          name: '借阅时间',
          key: 'borrow_at',
        },
        {
          name: '作者',
          key: 'author',
        },
        {
          name: '简介',
          key: 'synopsis',
        },
        {
          name: '出版时间',
          key: 'year_publication',
        },
      ],
    },
    dataSource: [],
  } as any)

//定义toolBar
  const toolBar = reactive<any>({
    form: {
        username: '',
    },
    input: [
        {
            label: '借阅人',
            key: 'username',
            placeholder: '请选择',
            el: 'select',
            options: [],
        },
    ],
    btns: [
        {
            label: '查询',
            icon: 'Search',
            event: searchEvent
        },
        {
            label: '重置',
            icon: 'Pointer',
            event: resetEvent,
        },

    ],
})
  </script>
  
  <style lang="scss" scoped>
  *::-webkit-scrollbar {
    display: none;
    width: 10px;
  }
  .box {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    .contentView {
      background-color: white;
      border-radius: 5px;
      height: calc(100vh - 144px);
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
  </style>
  